<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:36
-->
<template>
<div ref="bottom2_container" style="height: 95%"></div>
</template>

<script>
    import { Pie } from '@antv/g2plot';
    export default {
  mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
    this.initChart();
  },
  methods:{
    // 3. 初始化图表
    initChart(){
     
     const data = [
  { type: '地铁站', value: 10 },
  { type: '广场', value: 10 },
  { type: '园区', value: 15 },
  { type: '黄河边', value: 5 },
  { type: '妇幼站', value: 10 },
  { type: '中山桥', value: 10 },
  { type: '森林公园', value: 5 },
  { type: '农大', value: 5 },

];

const piePlot = new Pie(this.$refs.bottom2_container, {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 0.9,
  label: {
    type: 'inner',
    offset: '-30%',
    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
    style: {
      fontSize: 14,
      textAlign: 'center',
    },
  },
  interactions: [{ type: 'element-active' }],
});

piePlot.render();
setInterval(() => {
  piePlot.changeData(data.map((d) => ({ ...d, value: d.value * Math.random() })));
}, 1200);
    }
  }
}
</script>
